<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link th:href="@{/front-resource/css/style.css}" type="text/css" rel="stylesheet" />
  <link th:href="@{/front-resource/css/app.css}" type="text/css" rel="stylesheet" />
  <!-- Favicon -->
  <!-- Favicon and Touch Icons -->
  <link th:href="@{/front-resource/images/favicon.png}" rel="shortcut icon" type="image/png">
  <link th:href="@{/front-resource/images/apple-touch-icon.png}" rel="apple-touch-icon">
  <link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" rel="apple-touch-icon" sizes="72x72">
  <link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" rel="apple-touch-icon" sizes="114x114">
  <link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" rel="apple-touch-icon" sizes="144x144">
  <title>个人信息</title>

</head>

<body>
  <!-- Start Main Menu Area -->
  <div th:replace="/common/frontCommon::header"></div>
  <!-- End Main Menu Area -->

  <section class="breadcromb-top section_100">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <ol class="text-white justify-content-center no-border mb-0">
            <li class="breadcrumb-item"><a href="index.html">主页</a></li>
            <li class="breadcrumb-item active">个人信息 </li>
          </ol>
          <div class="breadcromb-box">
            <h3>个人信息</h3>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="clearfix bg-dark profileSection pt80 pb80 admin-page">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-5 col-xs-12">
          <div class="dashboardBoxBg mb30">
            <div class="profileImage">
              <form action="/information/savePic" id="avatarForm" method="post" enctype="multipart/form-data">
                <input type="hidden" name="userId" th:value="${user.userId}">
                <img id="userAvatar" th:src="'/information/getPic?userId='+${user.userId}" src="../static/front-resource/images/avatar/avatar-8.jpg" alt="Image User" class="img-circle">
                <div class="file-upload profileImageUpload">
                  <div class="upload-area">

<!--                      <button class="button btn-primary" type="button"> <i class="icon-listy icon-upload">上传头像</i></button>-->
                    <div id="photoSelect" style="display: none;">
                      <input type="file" name="file" id="changePhoto" class="form-control-file">
                      <button class="button btn-primary" type="submit" id="btnChange">确定</button>
                    </div>
                    <div id="ifChange">
                      <button class="button btn-primary" type="button" id="enterChange">修改头像</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <div class="profileUserInfo bt profileName">
              <p>Your Current Plan</p>
              <h2>Platinum Package</h2>
              <h5>Next Payment: <span>28/11/2020</span></h5>
              <a href="#" class="btn btn-primary">Change</a>
            </div>
          </div>
        </div>
        <div class="col-md-8 col-sm-7 col-xs-12">
          <form name="form2" th:action="@{/information/save}" method="post" onsubmit="">
            <div class="dashboardBoxBg">
              <div class="profileIntro">
                <h2>您的信息</h2>
                <p>这里是您注册时录入的个人信息，您可以随时在这里进行修改</p>
              </div>
            </div>
            <div class="dashboardBoxBg mt30">
              <div class="profileIntro">
                <h3>关于您</h3>
                <div class="row">
                  <input type="hidden" name="userId" th:value="${user.userId}" id="userId">
                  <div class="form-group col-sm-6 col-xs-12">
                    <label for="realName">姓名</label>
                    <input type="text" name="realName" class="form-control" id="realName" th:value="${user.realName}">
                  </div>
                  <div class="form-group col-sm-6 col-xs-12">
                    <label>用户名</label>
                    <input type="text" id="username" name="username" th:value="${user.username}" class="form-control" required="">
                  </div>
                  <div class="form-group col-sm-12 col-xs-12">
                    <label>身份证号</label>
                    <input type="number" id="userIdentify" name="userIdentify" th:value="${user.userIdentify}" class="form-control" required="">
                    <p></p>
                  </div>
                  <div class="form-group col-sm-6 col-xs-12">
                    <label>生日</label>
                    <input id="userBirthday" type="date" name="stringUserBirthday" th:value="${#dates.format(user.userBirthday,'yyyy-MM-dd')}" class="form-control">
                  </div>
                  <div class="form-group col-sm-6 col-xs-12">
                    <label>性别</label>
                    <select  id="userSex" type="text" name="userSex" class="form-control">
                      <option value="1" selected th:if="${user.userSex}==1">男</option>
                      <option value="1"  th:if="${user.userSex}==0">男</option>
                      <option value="0"  th:if="${user.userSex}==1">女</option>
                      <option value="0" selected th:if="${user.userSex}==0">女</option>
                    </select>
                  </div>
                  <div class="form-group col-sm-6 col-xs-12">
                    <label>邮箱</label>
                    <input type="email" id="userEmail" name="userEmail" th:value="${user.userEmail}" class="form-control" required="">
                    <p></p>
                  </div>
                  <div class="form-group col-sm-6 col-xs-12">
                    <label>手机号</label>
                    <input type="number" id="userTel" name="userTel" th:value="${user.userTel}" class="form-control" required="">
                    <p></p>
                  </div>
                  <div class="form-group col-md-12 col-xs-12">
                    <button class="btn btn-primary" type="submit">保存更改</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
            <div class="dashboardBoxBg mt30">
              <div class="profileIntro">
                <h3>更改密码</h3>
                <form name="form3" th:action="@{/information/savePassword}" method="post" onsubmit="return checkpost2()">
                <div class="row">
                  <input type="hidden" name="userId" th:value="${user.userId}">
                  <div class="form-group col-md-12 col-xs-12">
                    <label for="currentPassword">当前的密码</label>
                    <input type="password" path="password" class="form-control" name="currentPassword" id="currentPassword" placeholder="请输入原密码" required="">
                    <p></p>
                  </div>
                  <div class="form-group col-md-12 col-xs-12">
                    <label for="newPassword">新的密码</label>
                    <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="新的密码" required="">
                  </div>
                  <div class="form-group col-md-12 col-xs-12">
                    <label for="confirmPassword">确认新的密码</label>
                    <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="确认新的密码" required="">
                  </div>
                  <div class="form-group col-md-12 col-xs-12">
                    <button class="btn btn-primary" type="submit">更新密码</button>
                  </div>
                </div>
                </form>
              </div>
            </div>
        </div>
      </div>
    </div>
  </section>
  <div th:replace="/common/frontCommon::footer"></div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
  <script>

      $(function () {
          $("#changePhoto").change(function () {
              var photo=this.files;
              for (var i = 0; i < photo.length; i++) {
                  reads(photo[i]);
              }
          });
          $("#enterChange").click(function () {
            $("#photoSelect").css("display","block");
            $("#ifChange").css("display","none");
          });
      });

      function reads(filename){
          var reader=new FileReader();
          reader.readAsDataURL(filename);
          reader.onload=function () {
              $("#userAvatar").attr("src",reader.result);
          }
      }

      $(document).ready(function(){
          $("input").blur(function() {
              var ele = $(this);
              var getValue = ele.val();//获取创建用户时输入的文本信息
              var userId = $("#userId").val();
              if ($(this).is("#currentPassword")) {

                  $.ajax({
                      async: false,
                      url: "/information/checkPassword",
                      type: "post",
                      data: {
                          "currentPassword": getValue,
                          "userId": userId
                      },
                      dataType: "json",
                      success: function (data2) {
                          if (data2 == true) {
                              ele.attr("style", "color:green;border:1px solid green");
                              ele.next().attr("style", "color:green").html("&nbsp;&nbsp;输入密码与原密码一致！请继续！");
                              return;
                          } else {
                              ele.attr("style", "color:red;border:1px solid red");
                              ele.next().attr("style", "color:red;").html("&nbsp;&nbsp;输入密码与原密码不一致！请重新输入！");
                          }
                      },
                      error: function () {

                      }
                  });

              }

          });
      });

      // $(function () {
      //   $("#downloadPic").click(function () {
      //     var userId=$("#userId").val();
      //     $.ajax({
      //       url:"/information/download",
      //       type:"post",
      //       data:{"userId":userId}
      //     });
      //   });
      // });

      $(function () {
        var userTel_reg=/^1(3|4|5|7|8|9)[0-9]\d{8}$/;
        var userEmail_reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        $("input").blur(function() {
          var ele = $(this);
          var getValue = ele.val();//获取创建用户时输入的文本信息
          if ($(this).is("#userTel")) {
            if(userTel_reg.test(getValue)){
              ele.attr("style", "color:black");
              ele.next().empty();
              $.ajax({
                async: false,
                url: "/user/checkRegister",
                type: "post",
                data: {"tel": getValue},
                dataType: "json",
                success: function (data) {
                  if (data === false) {
                    ele.attr("style", "color:red;border:1px solid red");
                    ele.next().attr("style", "color:red").html("&nbsp;&nbsp;此电话已被注册！（误点无操作请忽略！）");
                  } else {
                    ele.attr("style", "color:green;border:1px solid green");
                    ele.next().attr("style", "color:green;").html("&nbsp;&nbsp;此电话号可以注册！");
                  }
                },
                error: function () {
                }
              });
            }else {
              ele.attr("style", "color:red");
              ele.next().attr("style", "color:red").html("&nbsp;&nbsp;手机号不合法！请重新输入！");
            }
          } else if ($(this).is("#userEmail")) {
            if(userEmail_reg.test(getValue)){
              ele.attr("style", "color:black");
              ele.next().empty();
              $.ajax({
                async: false,
                url: "/user/checkRegister1",
                type: "post",
                data: {"email": getValue},
                dataType: "json",
                success: function (data1) {
                  if (data1 === false) {
                    ele.attr("style", "color:red;border:1px solid red");
                    ele.next().attr("style", "color:red").html("&nbsp;&nbsp;此邮箱已被注册！（误点无操作请忽略！）");
                  } else {
                    ele.attr("style", "color:green;border:1px solid green");
                    ele.next().attr("style", "color:green;").html("&nbsp;&nbsp;此邮箱可以注册！");
                  }
                },
                error: function () {
                }
              });
            }else {
              ele.attr("style", "color:red");
              ele.next().attr("style", "color:red").html("&nbsp;&nbsp;邮箱不合法！请重新输入！");
            }
          }
        });

        var userIdentify_reg=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        $("#userIdentify").blur(function(){
          var ele=$(this);
          var userId=$(this).val();
          var Id=$("#userIdentify").val();
          if(userIdentify_reg.test(Id)){
            ele.attr("style", "color:black");
            ele.next().empty();
          }else {
            ele.attr("style", "color:red");
            ele.next().attr("style", "color:red").html("&nbsp;&nbsp;身份证不合法！请重新输入！");
          }

          if($(this).css("color")!="rgb(255, 0, 0)"){
            var userBirthday=userId.substr(6,4)+"-"+userId.substr(10,2)+"-"+userId.substr(12,2);
            $("#userBirthday").val(userBirthday);
            var userSex=userId.substr(16,1)%2;
            $("#userSex").val(userSex);
          }
        });
      });


      function checkpost2() {

        if(form3.newPassword.value==null){
          alert("请输入密码");
          form3.newPassword.focus();
          return false;
        }else{
          if(form3.newPassword.value.length<6){
            alert("密码长度需大于等于6字符");
            form3.newPassword.focus();
            return false;
          }else{
            if(form3.newPassword.value.length>30){
              alert("密码长度需小于于30字符");
              form3.newPassword.focus();
              return false;
            }
          }
        }

        if(form3.confirmPassword.value==null){
          alert("请再次输入密码");
          form3.confirmPassword.focus();
          return false;
        }

        if(document.form3.newPassword.value !== document.form3.confirmPassword.value){
          alert("您两次输入的密码不一样！请重新输入.");
          document.form3.confirmPassword.focus();
          return false;
        }

      }


  </script>
</body>

</html>